<template>
  <div class="order-list">
    <search-form :form-items="searchItems" @search="handleSearch" />
    <base-table
      :data="tableData"
      :columns="tableColumns"
      :loading="loading"
      :current-page="currentPage"
      :page-size="pageSize"
      :total="total"
      @page-change="handlePageChange"
    >
      <template #status="{ row }">
        <el-tag :type="getStatusType(row.status)">{{ row.status }}</el-tag>
      </template>
    </base-table>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue';
import { BaseTable, SearchForm } from '@/components/Table';
import { orderApi } from '@/api';

// 表格数据
const tableData = ref([]);
const loading = ref(false);
const currentPage = ref(1);
const pageSize = ref(10);
const total = ref(0);

// 搜索条件
const searchItems = [
  {
    type: 'input',
    label: '订单号',
    prop: 'orderNo',
    placeholder: '请输入订单号'
  },
  {
    type: 'select',
    label: '订单状态',
    prop: 'status',
    placeholder: '请选择订单状态',
    options: [
      { label: '全部', value: '' },
      { label: '待处理', value: 'pending' },
      { label: '处理中', value: 'processing' },
      { label: '已完成', value: 'completed' },
      { label: '已取消', value: 'cancelled' }
    ]
  },
  {
    type: 'date',
    label: '创建时间',
    prop: 'createTime',
    dateType: 'daterange',
    startPlaceholder: '开始日期',
    endPlaceholder: '结束日期',
    valueFormat: 'YYYY-MM-DD'
  }
];

// 表格列配置
const tableColumns = [
  {
    prop: 'orderNo',
    label: '订单号',
    width: 180
  },
  {
    prop: 'status',
    label: '状态',
    width: 100,
    slotName: 'status'
  },
  {
    prop: 'amount',
    label: '金额',
    width: 100
  },
  {
    prop: 'customer.name',
    label: '客户名称',
    width: 120
  },
  {
    prop: 'createTime',
    label: '创建时间',
    width: 180
  },
  {
    type: 'action',
    label: '操作',
    width: 200,
    actions: [
      {
        label: '详情',
        type: 'primary',
        link: true,
        handler: (row: any) => {
          console.log('查看详情', row);
        }
      },
      {
        label: '编辑',
        type: 'primary',
        link: true,
        handler: (row: any) => {
          console.log('编辑', row);
        }
      },
      {
        label: '删除',
        type: 'danger',
        link: true,
        handler: (row: any) => {
          console.log('删除', row);
        }
      }
    ]
  }
];

// 获取状态类型
const getStatusType = (status: string) => {
  switch (status) {
    case 'completed':
      return 'success';
    case 'processing':
      return 'warning';
    case 'pending':
      return 'info';
    case 'cancelled':
      return 'danger';
    default:
      return 'info';
  }
};

// 处理搜索
const handleSearch = (formData: any) => {
  currentPage.value = 1;
  fetchData(formData);
};

// 处理分页变化
const handlePageChange = ({ page, size }: { page: number; size: number }) => {
  currentPage.value = page;
  pageSize.value = size;
  fetchData();
};

// 获取表格数据
const fetchData = async (params = {}) => {
  loading.value = true;
  try {
    const res = await orderApi.getOrderList({
      page: currentPage.value,
      pageSize: pageSize.value,
      ...params
    });
    tableData.value = res.data.list;
    total.value = res.data.total;
  } catch (error) {
    console.error('获取订单列表失败', error);
  } finally {
    loading.value = false;
  }
};

// 页面加载时获取数据
onMounted(() => {
  fetchData();
});
</script>

<style lang="scss" scoped>
.order-list {
  padding: 20px;
}
</style>
